<?xml version="1.0"?>
<jsp:root 	xmlns:jsp="http://java.sun.com/JSP/Page"
			xmlns:sql="http://java.sun.com/jsp/jstl/sql"
			xmlns:c="http://java.sun.com/jsp/jstl/core" 
			xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
			version="2.1">
	<jsp:directive.page contentType="text/html; charset=UTF-8" />
	<jsp:directive.page isELIgnored="false" />
	<jsp:output omit-xml-declaration="false"
		doctype-root-element="html"
		doctype-public="-//W3C//DTD XHTML 1.1//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd" /> 	
		
	<jsp:useBean id="userBean" class="es.albarregas.beans.UserBean" scope="session" />	
	<jsp:useBean id="productList" class="es.albarregas.beans.ProductListBean" scope="session" />
	
	
<!--[if lt IE 8]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="ISO-8859-1" />
    <title>Ikex | Tienda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="Josu Becerra" />
    
    <!-- Favicon y Apple touch icons (botones para Ipad y Iphone) -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/apple-touch/144.png" ></link>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch/114.png" ></link>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch/72.png" ></link>
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch/57.png" ></link>
    <link rel="shortcut icon" href="images/favicon.png" ></link>
    
    <!--  Google Fonts  -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'></link>
    
    <!-- Twitter Bootstrap; librería ventanas JQuery-->
    <link href="css/bootstrap.css" rel="stylesheet" ></link>
    <link href="css/responsive.css" rel="stylesheet" ></link>
    <!-- Slider Revolution -->
    <link rel="stylesheet" href="js/rs-plugin/css/settings.css" type="text/css" ></link>
    <!-- jQuery UI -->
    <link rel="stylesheet" href="js/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" ></link>
    <!-- PrettyPhoto -->
    <link rel="stylesheet" href="js/prettyphoto/css/prettyPhoto.css" type="text/css" ></link>
    <!-- main styles -->
     
    <link href="css/main.css" rel="stylesheet" ></link>
     
     <!-- JQuery -->
	<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
	<script type="text/javascript" src="js/jquery.min.js"><jsp:text /></script>

    <!-- Modernizr, librería que le dice al navegador cómo actuar si no soporta la funcionalidad de la página 
    <script src="js/modernizr.custom.56918.js"></script>    -->
 	
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	 
  </head>

   
  <body>
  
   
  	<!--  =====================  -->
    <!--  = Header - Cabecera =  -->
    <!--  =====================  -->  
    <c:choose>
    	<c:when test="${userLoggedIn == true}">
    		<jsp:include page="include/header-logged-in.jsp" />
    	</c:when>
    	<c:otherwise>
    		<jsp:include page="include/header.jsp" />
    	</c:otherwise>
    </c:choose>


	<!--  ====================================================  -->
    <!--  = Main Menu / Menú Principal - Barra de Navegación =  -->
    <!--  ====================================================  -->
    <jsp:include page="include/menu.jsp" />

	<!--  ==========  -->
    <!--  = Breadcrumbs =  -->
    <!--  ==========  -->
    <div class="darker-stripe">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <ul class="breadcrumb">
                        <li>
                            <a href="index.html">Inicio</a>
                        </li>
                        <li><span class="icon-chevron-right"></span></li>
                        <li>
                            <a href="shop.jsp">Tienda </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
	
	<!--  =========================================  -->
    <!--  = Main container - Contenedor principal =  -->
    <!--  =========================================  -->
    <div class="container">
        <div class="push-up blocks-spacer">
            <div class="row">
                
                <!--  ==========  -->
                <!--  = Sidebar =  -->
                <!--  ==========  -->
                <aside id="tourStep1" class="span3 left-sidebar">
                    <div id="sidebarFilters" class="sidebar-item sidebar-filters">
                        
                        <!--  ==========  -->
                        <!--  = Sidebar Title =  -->
                        <!--  ==========  -->
                        <div class="underlined">
                        	<h3><span class="light">Productos</span> por filtros</h3>
                        </div>
                        
                        <!--  ==============  -->
                        <!--  = Categorias =  -->
                        <!--  ==============  -->
                        <div id="tourStep2" class="accordion-group">
                            <div class="accordion-heading">
                                <a href="#filterOne" data-toggle="collapse" class="accordion-toggle">Categorias <b class="caret"><jsp:text /></b></a>
                            </div>
                            <div class="accordion-body collapse in" id="filterOne">
                                <div class="accordion-inner">
                                    <a class="selectable" data-target=".filter--Dormitorio" href="#"><i class="box"><jsp:text /></i> Dormitorio</a>
									<a class="selectable" data-target=".filter--Salón" href="#"><i class="box"><jsp:text /></i> Salón</a>
									<a class="selectable" data-target=".filter--Cocina" href="#"><i class="box"><jsp:text /></i> Cocina</a>
									<a class="selectable" data-target=".filter--Baño" href="#"><i class="box"><jsp:text /></i> Baño</a>
									<a class="selectable" data-target=".filter--Niños" href="#"><i class="box"><jsp:text /></i> Niños</a>
									<a class="selectable" data-target=".filter--Textiles" href="#"><i class="box"><jsp:text /></i> Textiles</a>
                                </div>
                            </div>
                        </div> <!-- /categories -->
                        
                        <!--  ==================  -->
                        <!--  = Precios slider =  -->
                        <!--  ==================  -->
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <a href="#filterPrices" data-toggle="collapse" class="accordion-toggle">Precio <span class="caret"><jsp:text /></span></a>
                            </div>
                            <div class="accordion-body in collapse" id="filterPrices">
                                <div class="accordion-inner with-slider">
                                    <div class="jqueryui-slider-container">
                                        <div id="pricesRange" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
                                        	<div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"><jsp:text /></div><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"><jsp:text /></a><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;"><jsp:text /></a></div>
                                    </div>
                                    <input type="text" disabled="" class="max-val pull-right" data-initial="432" />
                                    <input type="text" disabled="" class="min-val" data-initial="99" />
                                </div>
                            </div>
                        </div> <!-- /prices slider -->
                        

               
                        
                        <!--  ================  -->
                        <!--  = Filtro Marca =  -->
                        <!--  ================  -->
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <a href="#filterFour" data-toggle="collapse" class="accordion-toggle collapsed">Marca <b class="caret"><jsp:text /></b></a>
                            </div>
                            <div class="accordion-body collapse" id="filterFour">
                                <div class="accordion-inner">
									<a class="selectable detailed" data-type="brand" data-target="Ikea" href="#"><i class="box"><jsp:text /></i> Ikea</a>
									<a class="selectable detailed" data-type="brand" data-target="Lanmobel" href="#"><i class="box"><jsp:text /></i> Lanmobel</a>
									<a class="selectable detailed" data-type="brand" data-target="Toptapizados" href="#"><i class="box"><jsp:text /></i> Toptapizados</a>
									<a class="selectable detailed" data-type="brand" data-target="Franco furniture" href="#"><i class="box"><jsp:text /></i> Franco furniture</a>
 
                                </div>
                            </div>
                        </div> <!-- /marca  -->
                        
                        <a id="removeFilters" class="remove-filter" href="#" style="display: none;"><span class="icon-ban-circle"><jsp:text /></span> Eliminar filtros</a>
                        
                    </div>
                </aside> <!-- /sidebar -->
                
                <!--  ==========  -->
                <!--  = Main content =  -->
                <!--  ==========  -->
                <section class="span9">
                    
                    <!--  ==========  -->
                    <!--  = Title =  -->
                    <!--  ==========  -->
                    <div class="underlined push-down-20">
                        <div class="row">
                            <div class="span5">
                                <h3><span class="light">Todos</span> los Productos</h3>
                            </div>
                            <div class="span4">
                                <div id="tourStep4" class="form-inline sorting-by">
                                    <label class="black-clr" for="isotopeSorting">Ordenar:</label>
                                    <select class="span3" id="isotopeSorting">
                                        <option value="{&quot;sortBy&quot;:&quot;price&quot;, &quot;sortAscending&quot;:&quot;true&quot;}">Por Precio (Menor a Mayor) ↑</option>
                                        <option value="{&quot;sortBy&quot;:&quot;price&quot;, &quot;sortAscending&quot;:&quot;false&quot;}">By Price (High to Low) ↓</option>
                                        <option value="{&quot;sortBy&quot;:&quot;name&quot;, &quot;sortAscending&quot;:&quot;true&quot;}">By Name (Low to High) ↑</option>
                                        <option value="{&quot;sortBy&quot;:&quot;name&quot;, &quot;sortAscending&quot;:&quot;false&quot;}">By Name (High to Low) ↓</option>                              
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div> <!-- /title -->
                    
                    <!--  ==========  -->
                    <!--  = Products =  -->
                    <!--  ==========  -->
                    <div class="row popup-products">
                        <div class="isotope-container isotope" id="isotopeContainer" style="position: relative; overflow: hidden; height: 3744px;">
                    	    
        	              	<c:forEach var="producto" items="${productList.product}" varStatus="loopStatus"  >
	        	              	<!--  ===============  -->
	                            <!--  = Un Producto =  -->
	                            <!--  ===============  -->
	                    	    <div  data-brand="${producto.marca }" data-color="orange" data-size="xs|m|l|xl" data-popularity="4" data-price="${producto.precio }" class="span3 filter--${producto.categoria } isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(300px, 3450px, 0px) scale3d(1, 1, 1); opacity: 1;">
	                    	        <div class="product">
	                    	             
	                    	            <div class="product-img">
	                    	                <div class="picture">
	                    	                    <img width="540" height="374" src="${producto.imagen}" alt="${producto.nombre }" />
	                    	                    <div class="img-overlay">
	                    	                        <a href="#" class="btn more btn-primary">Ver</a>
	                    	                        <a href="#" class="btn buy btn-danger">Comprar</a>
	                    	                    </div>
	                    	                </div>
	                    	            </div>
	                    	            <div class="main-titles no-margin">
	                    	                <h4 class="title precio"><fmt:formatNumber type="currency" currencySymbol="€" value="${producto.precio}" /></h4>
	                    	                <h5 class="no-margin isotope--title"><c:out value="${producto.nombre }"></c:out></h5>
	                    	            </div>
	                    	            
	                    	        </div>
	                    	    </div> <!-- /un producto -->
        	              	</c:forEach>
                    	                        	                     	                           	  
                    	    
                    	</div>
                	</div>
                	<hr />
                </section> <!-- /main content -->
            
        </div>
    </div>
    
    </div> <!-- container -->
    
    <!--  ========================  -->
    <!--  = Footer  =  -->
    <!--  ========================  -->
    <jsp:include page="include/footer.jsp" />
    
    
	
	<!--  ====================  -->
	<!--  = Ventanas modales =  -->
 	<!--  ====================  -->
	<jsp:include page="include/ventanas.jsp" />

	<!--  ==============  -->
    <!--  = JavaScript =  -->
    <!--  ==============  -->
	<jsp:include page="include/js.jsp" />
	
	
	
	<!-- Si procede de un error de registro, abrimos la ventana modal de registro -->
	<c:if test="${registroKO == true }">
		<script type="text/javascript">
	    	//console.log("estoy dentro");
		    $(window).load(function(){
		        $('#registerModal').modal('show');
		    });
		</script>
	</c:if>
	
	<!-- Si procede de un error de login, abrimos la ventana modal de login -->
	<c:if test="${loginKO == true }">
		<script type="text/javascript">
		    $(window).load(function(){
		        $('#loginModal').modal('show');
		    });
		</script>
	</c:if>
	

	
  </body>
</html>

 </jsp:root>   
    